<template>
  <div class="home-container">
    <mounting></mounting>
    
    <div class="hot-group">
      <div
        class="hot-group-cell"
        v-for="(item,index) in items"
        :key="index"
      >
        <van-cell
          :title="item.title"
          :label="item.description"
          center
          :border="false"
        >
          <image
            :src="item.thumb"
            mode="aspectFit"
          ></image>
        </van-cell>
      </div>
    </div>
    <van-cell-group>
      <column
        :format="item.format"
        :title="item.title"
        :description="item.description"
        :medias="item.medias"
        v-for="(item,index) in cells"
        :key="index"
      />
    </van-cell-group>
  </div>
</template>

<script>
// import card from '@/components/card'
import mounting from '@/components/tab/mounting'
import column from '@/components/column/index'
import ScaleImage from '@/components/scaleImage'
export default {
  components: {
    // card,
    mounting,
    column,
    ScaleImage
  },

  data () {
    return {
      title: '',
      titleColor: '#000000',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      video: '/static/icons/video.png',
      checkedItemId: 0,
      show: false,
      data: {
        name: 'test',
        thumb: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
        begintime: '2019-09-21',
        description: 'test',
        likes: '22'
      },

      cells: [
        {
          id: 1,
          title: '12年前发明“熊猫烧香”病毒的网络天才，坐4年牢后，现状如何？',
          description: '微观影视 1小时前 102评论',
          format: 'banner',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/01.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 2,
          title: '济南东部房价“喋喋不休”，西部房价依然坚挺，为何？',
          description: '济南楼市 1小时前 102评论',
          format: 'default',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/02.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 3,
          title: '心寒！市民主动清理黑衣人设置的路障 被暴徒用重器猛击头部',
          description: '环球网国内 7小时前 21评论',
          format: 'default',
          medias: []
        },
        {
          id: 4,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/05.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 6,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 5,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        }
      ],
      items: [
        {
          id: 1,
          title: '随后拍',
          price: '￥100',
          thumb: '/static/images/1.png',
          description: '随时随地，想拍就拍'
        },
        {
          id: 2,
          title: '信息发布',
          price: '￥500',
          thumb: '/static/images/2.png',
          description: '最新的消息都属于你'
        },
        {
          id: 3,
          title: '投票',
          price: '￥200',
          thumb: '/static/images/3.png',
          description: '为他投上一票'
        },
        {
          id: 4,
          title: '抽奖',
          price: '￥1480',
          thumb: '/static/images/4.png',
          description: '惊喜好运在这里'
        }
      ]
    }
  },

  created () {
    console.log(process.env.HOST)
    console.log('test created')
  },
  computed: {
    matchItemPrice () {
      return ''
    }
  },
  methods: {}
}
</script>

<style lang="less">
.home-container {
  padding-top: 0;
  position: relative;
}

.hot-group {
  padding: 15px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;

  &-cell {
    flex-basis: 50%;
    .van-cell {
      padding: 10px;
      &__value {
        flex: none;
        -webkit-flex: none;
      }
    }

    image {
      width: 30px;
      height: 30px;
    }
  }

  &-cells {
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #f1f2f3;
    background-color: #f1f2f3 !important;
    .van-cell__value {
      flex: none;
      -webkit-flex: none;
    }
    .van-radio__icon {
      .van-icon {
        display: none !important;
      }
    }
    &__checked {
      border-color: #f7a031;
      background-color: rgba(245, 175, 80, 0.2) !important;
      .van-cell__title,
      .van-cell__label,
      .van-cell__value {
        color: #ff6600;
      }
    }
  }
}
</style>
